<!DOCTYPE html>
<title>Test video control element visibility when play by touch.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<video controls loop></video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");

    video.oncanplaythrough = t.step_func(function() {
        var controls = mediaControlsButton(video, "panel");

        assert_true(video.paused);

        // Click the play button.
        var playCoords = elementCoordinates(enabledPlayButton(video));
        var clickX = playCoords[0];
        var clickY = playCoords[1];
        eventSender.gestureTap(clickX, clickY);
        eventSender.gestureTapDown(clickX, clickY);

        // Create a DOMActivate event and dispatch it.
        var event = document.createEvent("UIEvents");
        event.initUIEvent("DOMActivate", true, true, window, 1);
        controls.dispatchEvent(event);

        assert_false(video.paused);

        runAfterHideMediaControlsTimerFired(t.step_func_done(function() {
            assert_true(controls.classList.contains("transparent"));
        }), video);
    });

    video.src = "content/test.ogv";
});
</script>
